import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';

export interface Channel {
  id: number;
  icon: string;
  title: string;
  link: string;
}

@Component({
  selector: 'app-horizontal-grid',
  templateUrl: './horizontal-grid.component.html',
  styleUrls: ['./horizontal-grid.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HorizontalGridComponent implements OnInit {
  @Input() cols = 8;  // 表示一行有几列
  @Input() displayCols = 5;  // 表示屏幕可显示的列数
  sliderMargin = '0';
  constructor() { }

  ngOnInit() {
  }

  public get scrollable (): boolean {
    return this.cols > this.displayCols;
  }

  public get templateRows (): string {
    return `minmax(auto, max-content)`;
    // auto 表示每行的高度 不会小于 内容的最小高度
    // max-content 表示每行的高度 会根据 内容的最大尺寸进行调整，以确保内容完全显示
  }

  public get templateColumns(): string {
    return `repeat(${this.cols}, calc((100vw - ${this.displayCols *
      0.4}rem) / ${this.displayCols}))`;
  }

  public handleScroll(ev) {
    const target = ev.target;
    const widthPercent = 50; // css裡面highlight的width設定50%
    const marginTransRate = (100 - widthPercent) / 100; // 滑動距離與滑動條的marginLeft轉換比率 (每滑動1%, marginLeft要增加 rate%)

    const maxScrollLeft = (target.scrollWidth - target.clientWidth); // 往左邊滑動多少可以到底
    const scrollRate = (target.scrollLeft / maxScrollLeft); // 當前滑動的比率

    this.sliderMargin = `0 ${(scrollRate * marginTransRate) * 100}%`;
  }

}
